<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天首页</title>
    <link rel="stylesheet" href="/static/css/chat.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>

<body>
<div id="bg">
    <div class="top">
        <span class="username">纸飞机</span> <span class="close"><a href="{:url('index/Login/login_out')}">退出</a></span>
        <span class="des">在深邃的编码世界里，做一个无忧无虑的小小程序员.......</span>
        <div class="tab">
            <img onclick="changType(1)" src="/static/image/personal.png" alt="">
            <img onclick="changType(2)" src="/static/image/people.png" alt="">
            <img onclick="changType(3)" src="/static/image/msg.png" alt="">
        </div>
    </div>
    <!--好友界面-->
    <div class="scroll_box active" id="personal"><div class="perBox"></div></div>
    <!--群组页面-->
    <div class="scroll_box" id="people"><div class="perBox">
        <ul>
            <li roomId="1" onclick="show_group_page(1,'00后聊天组')"><img src="/static/image/header/head_1.jpg" alt="">00后聊天组</li>
            <li roomId="2" onclick="show_group_page(2,'90后聊天组')"><img src="/static/image/header/head_2.jpg" alt="">90后聊天组</li>
            <li roomId="3" onclick="show_group_page(3,'80后聊天组')"><img src="/static/image/header/head_3.jpg" alt="">80后聊天组</li>
        </ul>
    </div></div>
    <!--消息页面-->
    <div class="scroll_box" id="msg"><div class="perBox">
        <div class="add_circle" onclick="show_circle_send_page()"><img src="/static/image/add.png" alt=""></div>
        <!--圈列表-->
        <div class="circle_list"><ul></ul></div>
    </div></div>
    <!--底部-->
    <div id="bottom">
        <a href="http://yqy.ndstop.com" target="_blank">星辰网络博客</a>
    </div>
</div>
</body>
<script src="http://yqy.ndstop.com/static/home/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script src="/static/layui/layui.js"></script>

<!--单独聊天部分js-->
<script>
    // 域名
    var url = 'http://chat.ndstop.cn:9501/';
    // 当前在线用户
    var online_user = null;
    // 当前用户
    var current_user = null;
    // 存储消息
    var chatArr = [];
    // 聊天模板
    var left_tpl = "<div class='left_chat'><img class='header_img' src='{header}'><span>{username}</span><div class='left_chat_content'><p>{content}</p></div></div>";
    var right_tpl = "<div class='right_chat'><img class='header_img' src='{header}'><span>{username}</span><div class='right_chat_content'><p>{content}</p></div></div>";

    // websocket链接
    var ws = new WebSocket("{$websocket}");
    var uid = "{$uid}";
    ws.onopen = function(){
        ws.send(JSON.stringify({'type':101,'uid':uid}));
    };

    ws.onmessage = function(evt)
    {
        var _receive_data = JSON.parse(evt.data);
        switch (_receive_data.code) {
            case 101:
                // 更新在线用户信息
                online_user = _receive_data.online_user;
                current_user = {'fd':_receive_data.fd ? _receive_data.fd : 0,'username':_receive_data.username ? _receive_data.username : '','uid':_receive_data.uid,'des':_receive_data.des};
                show_user();
                break;
            case 102:
                // 私聊消息
                var key = _receive_data.from_id+'_'+_receive_data.to_id;
                var e_key = _receive_data.to_id+'_'+_receive_data.from_id;
                show_msg(key,e_key);
                break;
            case 103:
                // 图片消息
                var key = _receive_data.from_id+'_'+_receive_data.to_id;
                var e_key = _receive_data.to_id+'_'+_receive_data.from_id;
                show_msg(key,e_key);
                break;
            case 112:
                // 群组文本消息
                var key = 'room_chat_'+_receive_data.roomId;
                show_group_msg(key,_receive_data.roomId);
                break;
            case 113:
                // 群组图片消息
                var key = 'room_chat_'+_receive_data.roomId;
                show_group_msg(key,_receive_data.roomId);
                break;
            case 108:
                // 朋友圈消息
                show_new_circle(_receive_data.circle);
                break;
            default:
                break;
        }
    };

    ws.onclose = function(evt)
    {
        console.log('WebSocketClosed!');
    };

    ws.onerror = function(evt)
    {
        console.log('WebSocketError!');
    };

    // 显示在线用户
    function show_user(){
        var tpl = "<li onclick='show_chat({uid})'><img src='{avatar}'><p>{username}</p><p>{createtime}<span class='msgtips' style='display: none'></span></p></li>";
        var str = '';
        for(var i in online_user){
            var data = JSON.parse(online_user[i]);
            if(data.uid != current_user.uid){
                str += tpl.replace('{uid}',data.uid).replace('{avatar}',data.avatar).replace('{username}',data.username).replace('{createtime}',data.logintime);
            }
        }
        $("#personal").html('<ul>'+str+'</ul>');
        $(".username").text(current_user.username);
        $(".des").text(current_user.des);
    }

    // 显示消息
    function show_msg(key,e_key){
        // 获取聊天数据
        $.post(url+'getMsgArr',{'key':key,'e_key':e_key},function (res) {
            var _data = JSON.parse(res);
            // 追加聊天列表,只追加最新的一条
            var _chat_data = JSON.parse(_data.data[0]);
            var str = '';
            // 额外用户信息
            var object_fd = $('.chat').attr('user_fd');
            if(!object_fd) return false;
            // 判断是否是当前的用户对消息
            if(object_fd && object_fd != _chat_data.from_id && object_fd != _chat_data.to_id) {
                var anther_user_info = JSON.parse(online_user[_chat_data.from_id]);
                layer.msg('用户：'+anther_user_info.username+' 给您发了消息，请查看');
            } else {
                if(_chat_data.from_id == current_user.uid){
                    // 当前用户信息
                    var current_user_info = JSON.parse(online_user[current_user.uid]);
                    if(_chat_data.code == 102){
                        str += right_tpl.replace("{header}",current_user_info.avatar).replace("{username}",current_user_info.username).replace("{content}",analysis_emoji(_chat_data.content));
                    } else {
                        var img_tpl = "<img src='"+_chat_data.img+"'>";
                        str += right_tpl.replace("{header}",current_user_info.avatar).replace("{username}",current_user_info.username).replace("{content}",img_tpl);
                    }
                } else {
                    // 其他用户信息
                    var else_user_info = JSON.parse(online_user[_chat_data.from_id]);
                    if(_chat_data.code == 102){
                        str += left_tpl.replace("{header}",else_user_info.avatar).replace("{username}",else_user_info.username).replace("{content}",analysis_emoji(_chat_data.content));
                    } else {
                        var img_tpl = "<img src='"+_chat_data.img+"'>";
                        str += left_tpl.replace("{header}",else_user_info.avatar).replace("{username}",else_user_info.username).replace("{content}",img_tpl);
                    }
                }
                // 渲染到页面
                $(".content").append(str);
            }

        })
    }

    // 选择图片
    function select_img()
    {
        $("#getImg").click();
    }
    // tab切换
    function changType(type){
        if(type == 1){
            $("#personal").addClass('active');
            $("#people").removeClass('active');
            $("#msg").removeClass('active');
        } else if(type == 2){
            $("#personal").removeClass('active');
            $("#people").addClass('active');
            $("#msg").removeClass('active');
        } else {
            $("#personal").removeClass('active');
            $("#people").removeClass('active');
            $("#msg").addClass('active');
        }
    }

    // 聊天界面显示
    function show_chat(obj_uid)
    {
        var object_user = JSON.parse(online_user[obj_uid]);
        var key = current_user.uid+'_'+obj_uid;
        var e_key = obj_uid+'_'+current_user.uid;

        // 获取当前用户对应目标用户的聊天记录
        $.post(url+'getMsgArr',{'key':key,'is_all':1,'e_key':e_key},function (res) {
            var _chat_data = JSON.parse(res);
            // 当前用户信息
            var current_user_info = JSON.parse(online_user[current_user.uid]);
            // 渲染所有聊天数据
            var str = '';
            var _chat_arr = _chat_data.data;
            if(_chat_arr.length > 0){
                for(var i=_chat_arr.length-1;i>=0;i--){
                    var _arr = JSON.parse(_chat_arr[i]);
                    if(_arr.from_id == current_user.uid){
                        // 来自自己的聊天
                        if(_arr.code == 102){
                            str += right_tpl.replace("{header}",current_user_info.avatar).replace("{username}",current_user_info.username).replace("{content}",analysis_emoji(_arr.content));
                        } else {
                            var img_tpl = "<img src='"+_arr.img+"'>";
                            str += right_tpl.replace("{header}",current_user_info.avatar).replace("{username}",current_user_info.username).replace("{content}",img_tpl);
                        }
                    } else {
                        // 其他用户信息
                        var else_user_info = JSON.parse(online_user[_arr.from_id]);
                        // 来自他人的聊天
                        if(_arr.code == 102){
                            str += left_tpl.replace("{header}",else_user_info.avatar).replace("{username}",else_user_info.username).replace("{content}",analysis_emoji(_arr.content));
                        } else {
                            var img_tpl = "<img src='"+_arr.img+"'>";
                            str += left_tpl.replace("{header}",else_user_info.avatar).replace("{username}",else_user_info.username).replace("{content}",img_tpl);
                        }
                    }
                }
            }

            var content_tpl = "<div class='content'>"+str+"</div>";
            var str = "<div class='chat' user_fd='"+obj_uid+"'><div class='header'><img src='"+object_user.avatar+"' style='width: 50px'> "+object_user.username+"</div>"+content_tpl+"<div id='emoji_box' style='display: none;'></div><div class='menu'><img onclick='select_img()' src='/static/image/send_img.png'><input type='file' style='display: none' id='getImg' onchange='sendImg("+obj_uid+")'><img id='emoji_tip' onclick='createEmoji()' src='/static/image/emoji_img.png'></div><div class='sendmsg'><textarea id='text-input'></textarea></div><div class='btn_send'><button type='button' onclick='sendMsg("+obj_uid+")' style='float: right' class='layui-btn layui-btn-normal'>发送消息</button></div></div>";

            // 显示处理
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['600px', '600px'], //宽高
                content: str
            });
        });
    }

    // 发送文字消息
    function sendMsg(obj_uid=0,roomId=0)
    {
        if(uid == 0 && roomId == 0) return layer.msg('请输入要发送的内容');
        var content = $("#text-input").val();
        if(content == '') return layer.msg('请输入要发送的内容');
        if(roomId != 0){
            var message = {'type':112,'content':content,'roomId':roomId};
        } else {
            var message = {'type':102,'content':content,'to_id':obj_uid};
        }
        $("#text-input").val('');
        ws.send(JSON.stringify(message));
    }

    // 发送图片消息
    function sendImg(obj_uid=0,roomId=0)
    {
        // FormData对象，来发送二进制文件。
        var formdata = new FormData();
        // 将文件追加到 formdata对象中。
        formdata.append("getImg",document.getElementById('getImg').files[0]);
        $.ajax({
            type: "POST",
            url: "/upload_img",
            data:formdata,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            dataType: "json",
            success: function(data){
                var _json = JSON.parse(data);
                if(_json.code == 200){
                    if(roomId != 0){
                        var message = {'type':113,'img':_json.msg,'roomId':roomId};
                    } else {
                        var message = {'type':103,'img':_json.msg,'to_id':obj_uid};
                    }
                    ws.send(JSON.stringify(message));
                } else {
                    layer.msg(_json.msg);
                }
                $("#getImg").val('');
            },
            error: function(jqXHR){
                layer.msg("发生错误：" + jqXHR.status);
            },
        });
    }

    function createEmoji(){
        // 显示表情
        var emoji_div = document.getElementById("emoji_box");
        if(emoji_div.style.display === 'block'){
            emoji_div.style.display = 'none';
        } else {
            emoji_div.style.display = 'block';
            show_biaoqing();
        }
    }

    // 显示表情
    function show_biaoqing() {
        var row = 9, col = 9;
        var str = '<table class="emoji">';
        for (var i = 0; i < row; i++) {
            str += '<tr>';
            for (var j = 0; j < col; j++) {
                var n = i * col + j;
                str += '<td>' + (n > 71 ? '' : ('<img onclick="select_emoji(' + n + ');" src="/static/image/emoji/' + n + '.gif" />')) + '</td>';
            }
            str += '</tr>';
        }
        str += '</table>';
        $(".layui-layer-content").find("#emoji_box").html(str);
    }

    // 选择表情
    function select_emoji(n)
    {
        // 输入框
        var user_input = document.getElementById("text-input");
        cursor_insert(user_input, '{#' + n + '}');
        $("#emoji_box").fadeOut();
    }

    // 光标处插入内容
    function cursor_insert(obj, txt) {
        var user_input = document.getElementById("text-input");
        if (document.selection) {
            obj.selection.createRange().text = txt;
        } else {
            var v = obj.value;
            var i = obj.selectionStart;
            obj.value = v.substr(0, i) + txt + v.substr(i);
            user_input.focus();
            obj.selectionStart = i + txt.length;
        }
    }

    // 解析消息中的表情
    function analysis_emoji(str) {
        var p = /{#(\d|[1-6]\d|7[01])}/;
        if (p.test(str)) {
            return analysis_emoji(str.replace(p, "<img src='/static/image/emoji/$1.gif'/>"))
        } else {
            return str;
        }
    }

</script>
<!--群组聊天部分js-->
<script>

    // 群组界面显示
    function show_group_page(roomId,roomname)
    {
        join_room(roomId,current_user.fd);
        var key = 'room_chat_'+roomId;
        // 获取当前用户对应目标用户的聊天记录
        $.post(url+'getRoomMsgArr',{'key':key,'is_all':1},function (res) {
            var _chat_data = JSON.parse(res);
            // 渲染所有聊天数据
            var str = '';
            var _chat_arr = _chat_data.data;
            if(_chat_arr.length > 0){
                for(var i=_chat_arr.length-1;i>=0;i--){
                    var _arr = JSON.parse(_chat_arr[i]);

                    if(_arr.uid == current_user.uid){
                        if(_arr.code == 112){
                            str += right_tpl.replace("{header}",_arr.avatar).replace("{username}",_arr.username).replace("{content}",analysis_emoji(_arr.content));
                        } else {
                            var img_tpl = "<img src='"+_arr.img+"'>";
                            str += right_tpl.replace("{header}",_arr.avatar).replace("{username}",_arr.username).replace("{content}",img_tpl);
                        }
                    } else {
                        if(_arr.code == 112){
                            str += left_tpl.replace("{header}",_arr.avatar).replace("{username}",_arr.username).replace("{content}",analysis_emoji(_arr.content));
                        } else {
                            var img_tpl = "<img src='"+_arr.img+"'>";
                            str += left_tpl.replace("{header}",_arr.avatar).replace("{username}",_arr.username).replace("{content}",img_tpl);
                        }
                    }
                }
            }

            var content_tpl = "<div class='content'>"+str+"</div>";
            var str = "<div class='chat' roomId='"+roomId+"'><div class='header'><img src='/static/image/header/head_"+roomId+".jpg' style='width: 50px'>"+roomname+"</div>"+content_tpl+"<div id='emoji_box' style='display: none;'></div><div class='menu'><img onclick='select_img()' src='/static/image/send_img.png'><input type='file' style='display: none' id='getImg' onchange='sendImg(0,"+roomId+")'><img id='emoji_tip' onclick='createEmoji()' src='/static/image/emoji_img.png'></div><div class='sendmsg'><textarea id='text-input'></textarea></div><div class='btn_send'><button type='button' onclick='sendMsg(0,"+roomId+")' style='float: right' class='layui-btn layui-btn-normal'>发送消息</button></div></div>";

            // 显示处理
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['600px', '600px'], //宽高
                content: str
            });
        });
    }

    // 显示消息
    function show_group_msg(key,roomId){
        var object_room = $(".chat").attr('roomId');
        if(object_room != roomId) return false;
        // 获取聊天数据
        $.post(url+'getRoomMsgArr',{'key':key},function (res) {
            var _data = JSON.parse(res);
            // 追加聊天列表,只追加最新的一条
            var _chat_data = JSON.parse(_data.data[0]);
            if(!_chat_data) return false;
            var str = '';
            if(_chat_data.uid == current_user.uid){
                // 当前用户信息
                var current_user_info = JSON.parse(online_user[current_user.uid]);
                if(_chat_data.code == 112){
                    str += right_tpl.replace("{header}",current_user_info.avatar).replace("{username}",current_user_info.username).replace("{content}",analysis_emoji(_chat_data.content));
                } else {
                    var img_tpl = "<img src='"+_chat_data.img+"'>";
                    str += right_tpl.replace("{header}",current_user_info.avatar).replace("{username}",current_user_info.username).replace("{content}",img_tpl);
                }
            } else {
                // 其他用户信息
                var else_user_info = JSON.parse(online_user[_chat_data.uid]);
                if(_chat_data.code == 112){
                    str += left_tpl.replace("{header}",else_user_info.avatar).replace("{username}",else_user_info.username).replace("{content}",analysis_emoji(_chat_data.content));
                } else {
                    var img_tpl = "<img src='"+_chat_data.img+"'>";
                    str += left_tpl.replace("{header}",else_user_info.avatar).replace("{username}",else_user_info.username).replace("{content}",img_tpl);
                }
            }
            // 渲染到页面
            $(".content").append(str);
        })
    }

    // 加入房间
    function join_room(roomId,fd){
        // 告诉服务端，当前用户假如了某个聊天室
        var message = {'type':105,'fd':fd,'roomId':roomId};
        ws.send(JSON.stringify(message));
    }
</script>
<!--朋友圈部分js-->
<script>
    // 朋友圈列表模板
    var circle_tpl = "<li class='cir_list'><img class='header' src='{avatar}'><div class='circle_content'><h3>{username}<span style='display: {css_type};' onclick='del_circle({id3},this)'>删除</span></h3><p>{content}</p><div class='img_list'>{images}</div><p style='height: 30px;margin-top: 10px;float:left;width: 100%;'><span class='zan' onclick='click_zan({id1},this)'></span>点赞：<span class='zan_num'>{zan_num}</span><span class='ping' onclick='click_ping({id2})'></span></p></div></li>";

    // 朋友圈发布模板
    var circle_send_tpl = "<div class='send_circle'><textarea id='circle_content' name='desc' placeholder='请输入内容' class='layui-textarea'></textarea><p style='padding-top: 10px;padding-left: 10px;'><button type='button' class='layui-btn' id='test1' onclick='getCircleImg()'><i class='layui-icon'>&#xe67c;</i>上传图片</button><input type='file' style='display: none' id='circle_img_select' onchange='sendCircleImg()'></p><p id='circle_img_list' style='margin-top: 10px;'></p><p style='color: red;font-size: 12px;margin-top: 10px;'>双击图片可删除选择的图片</p><p><button type='button' onclick='createCircleFriend()' class='layui-btn' style='float: right;margin: 25px 5px 0 0;'>立即发布</button></p></div>";

    // 评论模板
    var comment_tpl = "<li><img src='{avatar}'><div class='com_content'><h3>{username}</h3><p>{content}</p></div></li>";
    // 图片列表模板
    var img_tpl = "<span ondblclick='del_circle_img({circle_id})' style='padding: 5px;'><img style='width: 100px;' src='{img_url}'></span>";

    // 当前选择的图片
    var circle_imgs = [];

    // 显示最新发送的一条朋友圈
    function show_new_circle(data){
        var str = '';
        var img_tpl = "<img src='{img_val}'>";
        var img_str = '';
        var image_arr = JSON.parse(data.images);
        if(image_arr != null){
            for (var j in image_arr){
                img_str += img_tpl.replace('{img_val}',image_arr[j]);
            }
        }
        str += circle_tpl.replace('{avatar}',data.avatar).replace('{username}',data.username).replace('{content}',data.content).replace('{images}',img_str).replace('{zan_num}',data.zan).replace('{id1}',data.id).replace('{id2}',data.id);
        // 追加
        $(".circle_list ul").prepend(str);
    }

    setTimeout(show_all_circle,3000);

    // 显示已有的朋友圈
    function show_all_circle(){
        $.post(url+'getCircleList',{},function(res){
            var str = '';
            var _data = res.data;
            for (var i in _data){
                var img_tpl = "<img src='{img_val}'>";
                var img_str = '';
                if(_data[i].images != null){
                    for (var j in _data[i].images){
                        img_str += img_tpl.replace('{img_val}',_data[i].images[j]);
                    }
                }

                // 显示样式
                var css_type = 'none';

                if(_data[i].uid == current_user.uid){
                    css_type = 'block';
                }
                str += circle_tpl.replace('{avatar}',_data[i].avatar).replace('{username}',_data[i].username).replace('{content}',_data[i].content).replace('{images}',img_str).replace('{zan_num}',_data[i].zan).replace('{id1}',_data[i].id).replace('{id2}',_data[i].id).replace('{id3}',_data[i].id).replace('{css_type}',css_type);
            }
            // 填充
            $(".circle_list ul").html(str);
        })
    }
    
    // 显示发布页面
    function show_circle_send_page()
    {
        // 显示处理
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['600px', '400px'], //宽高
            content: circle_send_tpl
        });
    }

    // 模拟点击触发上传
    function getCircleImg() {
        $("#circle_img_select").click();
    }

    // 图片上传
    function sendCircleImg()
    {
        if(circle_imgs.length > 3) return layer.msg('最多可上传4张图片');
        // FormData对象，来发送二进制文件。
        var formdata = new FormData();
        // 将文件追加到 formdata对象中。
        formdata.append("circle_img_select",document.getElementById('circle_img_select').files[0]);
        formdata.append("type",1);
        $.ajax({
            type: "POST",
            url: "/upload_img",
            data:formdata,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            dataType: "json",
            success: function(data){
                var _json = JSON.parse(data);
                if(_json.code == 200){
                    circle_imgs.push(_json.msg);
                    // 显示新图片
                    var str = '';
                    for (var i in circle_imgs){
                        str += img_tpl.replace('{circle_id}',i).replace('{img_url}',circle_imgs[i]);
                    }

                    $("#circle_img_list").html(str);
                } else {
                    layer.msg(_json.msg);
                }

                $("#circle_img_select").val('');
            },
            error: function(jqXHR){
                layer.msg("发生错误：" + jqXHR.status);
            },
        });
    }

    // 点赞
    function click_zan(cir_id,item){
        $.post(url+'click_zan',{'uid':current_user.uid,'cir_id':cir_id},function(res){
            if(res.code == 200){
                // 修改样式和数据
                $(item).next().text(res.data);
                layer.msg(res.msg)
            } else {
                layer.msg(res.msg);
            }
        })
    }

    // 评论
    function click_ping(cir_id){
        $.post(url+'getComment',{'cir_id':cir_id},function(res){
            var str = '';
            var comment_arr = res.data;

            if(comment_arr.length > 0){
                for (var i in comment_arr){
                    str += comment_tpl.replace('{avatar}',comment_arr[i].avatar).replace('{username}',comment_arr[i].username).replace('{content}',comment_arr[i].content);
                }
            }

            var tpl_conent = "<div class='comment_list'><ul>"+str+"</ul><div class='send_comment'><textarea id='com_con' name='desc' placeholder='请输入内容' class='layui-textarea'></textarea><button onclick='createCommentA("+cir_id+")' class='layui-btn' style='float: right;margin: 25px 5px 0 0;'>立即发送</button></div></div>";

            // 显示处理
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['500px', '600px'], //宽高
                content: tpl_conent
            });

        });
    }

    // 删除朋友圈
    function del_circle(cir_id,item){
        layer.confirm('是否确定删除当前朋友圈？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.post(url+'del_circle',{'cir_id':cir_id},function(res){
                if(res.code == 200){
                    // 删除当前列表
                    $(item).parents('.cir_list').remove();
                    layer.closeAll();
                } else {
                    layer.msg(res.msg);
                }
            })
        }, function(){
            layer.msg('已取消');
        });
    }

    // 删除图片
    function  del_circle_img(i){
        circle_imgs.splice(i,1);
        // 显示新图片
        var str = '';
        for (var i in circle_imgs){
            str += img_tpl.replace('{circle_id}',i).replace('{img_url}',circle_imgs[i]);
        }
        $("#circle_img_list").html(str);
    }

    // 发布创建
    function createCircleFriend(){
        var content = $("#circle_content").val();
        if(!content && circle_imgs.length < 1) return layer.msg('请选择要发送的内容或者图片');
        if(circle_imgs.length > 3) return layer.msg('最多可上传4张图片');
        // 提交
        $.post(url+'createFriendCircle',{'content':content,'imgs':circle_imgs,'uid':current_user.uid},function(res){
            if(res.code == 200){
                // 告诉所有用户发布了新的朋友圈
                layer.closeAll();
                ws.send(JSON.stringify({'type':108,'circle':res.data}));
            } else {
                return layer.msg(res.msg);
            }
        })
    }

    // 发送评论
    function createCommentA(cir_id){
        var content = $("#com_con").val();
        if(!content) return layer.msg('0');
        // 提交评论
        $.post(url+'click_ping',{'cir_id':cir_id,'uid':current_user.uid,'content':content},function(res){
            if(res.code == 200){
                // 添加到列表
                var str  = comment_tpl.replace('{avatar}',res.data.avatar).replace('{username}',res.data.username).replace('{content}',res.data.content);
                $(".comment_list ul").prepend(str);
                $("#com_con").val('');
                layer.msg(res.msg);
            } else {
                layer.msg(res.msg);
            }
        })
    }

</script>
</html>